<template>
  <div>
    <div style="padding: 5px 0">
      <el-input v-model="searchText" @keyup.enter.native="load" style="width: 200px"> <i slot="prefix"
          class="el-input__icon el-icon-search"></i></el-input>
      <el-button @click="load" type="primary" style="margin: 5px">搜索</el-button>
      <el-button @click="reset" type="warning" style="margin: 5px">重置</el-button>
      <el-button @click="add" type="success" style="margin: 5px">新增</el-button>
    </div>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="商品id" width="80px"></el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column   label="商品图片" width="120px">
        <template slot-scope="scope">
          <img :src="scope.row.imgs" style="width: 90px;height: 80px">
        </template>
      </el-table-column>
      <el-table-column prop="description" label="商品描述"></el-table-column>
      <el-table-column prop="discount" label="折扣"></el-table-column>
      <el-table-column prop="sales" label="销量"></el-table-column>
      <el-table-column prop="saleMoney" label="销售额（元)"></el-table-column>
      <el-table-column prop="createTime" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createTime.replace(" ", "&nbsp;&nbsp;") }}
        </template>
      </el-table-column>
      <el-table-column label="推荐" width="150">
        <!--      推荐商品-->
        <template slot-scope="scope">
          <el-switch v-model="scope.row.recommend" @change="handleRecommend(scope.row)" active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
          <el-popconfirm @confirm="del(scope.row.id)" title="确定删除？">
            <el-button type="danger" icon="el-icon-delete" circle slot="reference" style="margin-left: 10px"></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-size="pageSize" :page-sizes="[3, 5, 8, 10]" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 弹窗   -->
    <el-dialog title="信息" :visible.sync="dialogFormVisible" width="30%" :close-on-click-modal="false">
      <el-form :model="entity">
        <el-form-item label="商品名称" label-width="150px">
          <el-input v-model="entity.name" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="商品描述" label-width="150px">
          <el-input v-model="entity.description" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="折扣" label-width="150px">
          <el-input v-model="entity.discount" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="分类id" label-width="150px">
          <el-input v-model="entity.categoryId" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" label-width="150px">
          <el-upload class="upload-demo" ref="upload" action="" :file-list="fileList"
            :on-change="handleChange" :limit="2" :on-success="handleImgSuccess" :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Goods",
  data() {
    return {
      fileList: [],
      options: [],
      searchText: '',
      user: {},
      tableData:  [
        {
          id :1,
          name: "可爱玩偶",
          price: 20.99,
          description: "This is an example product.",
          imgs:"https://gw.alicdn.com/bao/uploaded/i4/2209919053565/O1CN01zV8zm11cCoqwCfEiU_!!2209919053565.jpg_300x300q90.jpg_.webp",
        },
        {
          id:2,
          name: "潮流大衣",
          price: 120.99,
          description: "This is an example product.",
          imgs:"https://gw.alicdn.com/bao/uploaded/i2/2212442553037/O1CN01jKIPKb1YIziPEzcoI_!!2212442553037.jpg_300x300q90.jpg_.webp",
        },
        {
          id:3,
          name: "HUAWEI mate60pro 遥遥领先",
          price: 5999,
          description: "This is an example product.",
          imgs:"https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/268451883/O1CN016uAe9k1PmSfoM5YNE_!!0-item_pic.jpg_580x580q90.jpg_.webp",
        },
      ],
      pageNum: 1,
      pageSize: 5,
      entity: {},
      total: 0,
      dialogFormVisible: false
    };
  },}
  
</script>

<style scoped></style>
